<template>
  <div class="add-shop">
     <div style="text-align:center;padding:20px 0" v-if="uploading"> 已完成 {{percent*100}} % </div>
     <div class="container" v-loading="uploading">
         <div  class="shop-title text-overflow">添加商户</div>
        <!-- form -->
         <el-form :model="info" :rules="rules" ref="shopinfoForm" label-width="140px" class="info-list">
            <el-form-item label="是否即富客户" prop="isJfPos">
                <el-switch v-model="info.isJfPos" 
                    active-text="是"
                    inactive-text="不是">
                </el-switch>
            </el-form-item>
            <div class="info-title">商户入网信息</div>
            <el-form-item label="商户名称" prop="shopName">
                <el-input class="info-input" v-model="info.shopName" placeholder="和营业执照保持一致"></el-input>
            </el-form-item>
            <el-form-item label="商户简称" prop="shopShortName">
               <el-input class="info-input" v-model="info.shopShortName" placeholder="商户简称" ></el-input>
            </el-form-item>
            <el-form-item label="注册名称" prop="shopRegisterName">
               <el-input class="info-input" v-model="info.shopRegisterName" placeholder="和营业执照保持一致" ></el-input>
            </el-form-item>
            <el-form-item label="所在省" prop="shopProvinces">
               <el-select class="info-select" v-model="info.shopProvinces" @change="handleShopProv" placeholder="请选择">
                    <el-option
                    v-for="item in provinceList"
                    :key="item.provinceid"
                    :label="item.province"
                    :value="item.provinceid">
                    </el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="所在市" prop="shopCity">
               <el-select class="info-select" v-model="info.shopCity" @change="handleShopCity" placeholder="请选择">
                    <el-option
                    v-for="item in cityList"
                    :key="item.cityid"
                    :label="item.city"
                    :value="item.cityid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所在区" prop="shopAreas">
               <el-select class="info-select" v-model="info.shopAreas" placeholder="请选择">
                    <el-option
                    v-for="item in areasList"
                    :key="item.areaid"
                    :label="item.area"
                    :value="item.areaid">
                    </el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="商户地址" prop="shopAddress">
               <el-input class="info-input" v-model="info.shopAddress" placeholder="详细地址（不含省市字样）" ></el-input>
            </el-form-item>
            <el-form-item label="商户联系人" prop="shopUserName">
               <el-input class="info-input" v-model="info.shopUserName" placeholder="联系人姓名" ></el-input>
            </el-form-item>
            <el-form-item label="联系人邮箱" prop="shopUserEmail">
               <el-input class="info-input" v-model="info.shopUserEmail" placeholder="联系人邮箱" ></el-input>
            </el-form-item>
            <el-form-item label="联系人电话" prop="shopUserPhone">
               <el-input class="info-input" v-model="info.shopUserPhone" placeholder="联系人电话（作为登录名和注册商户所属人）" ></el-input>
            </el-form-item>
            <el-form-item label="商户支付宝账户" prop="alipayAccount">
               <el-input class="info-input" v-model="info.alipayAccount" placeholder="商户支付宝账户" ></el-input>
            </el-form-item>
            <el-form-item label="客服电话" prop="shopCustomerPhone">
               <el-input class="info-input" v-model="info.shopCustomerPhone" placeholder="客服电话（用于联系商家客服）" ></el-input>
            </el-form-item>
            <el-form-item label="行业类别" prop="industryCategory">
                <el-cascader
                class="info-select" 
                :options="categoryList"
                :props = "{value:'dataValue',label:'dataValue',children:'dataDTOList'}"
                v-model="info.industryCategory"
                change-on-select
                ></el-cascader>
            </el-form-item>
            <div class="info-title">商户结算信息</div>
            <div class="info-tips"> 注：请保持银行卡信息(证件号码、开户名、卡号、预留手机号)的匹配性</div>
            <el-form-item label="入网商户类别" prop="shopType">
               <el-select class="info-select" v-model="info.shopType" placeholder="请选择">
                    <el-option
                    v-for="item in shopTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="执照证件号码" prop="shopIdNumber">
               <el-input class="info-input" v-model="info.shopIdNumber" placeholder="营业执照注册号或者统一社会信用代码 ，小微商户填写法人身份证号证件号码不能为空！" ></el-input>
            </el-form-item>
            <el-form-item label="证件办理日期" prop="shopStartTime">
                 <el-date-picker 
                    class="info-select"
                    v-model="info.shopStartTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="营业执照证件办理日期">
                </el-date-picker>
           </el-form-item>
            <el-form-item label="证件到期时间" prop="shopIdNumExTimeStr">
                 <el-date-picker 
                    class="info-select"
                    v-model="info.shopIdNumExTimeStr"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="营业执照证件有效期截至时间，小微商户填写法人身份证有效期">
                </el-date-picker>
           </el-form-item>
            <el-form-item label="结算账户类型" prop="settleAccountType">
               <el-select class="info-select" v-model="info.settleAccountType" placeholder="请选择">
                    <el-option
                    v-for="item in AccountTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="入网证件类型" prop="idNumberType">
               <el-select class="info-select" v-model="info.idNumberType" placeholder="请选择">
                    <el-option
                    v-for="item in idNoTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="法人身份姓名" prop="legalName">
               <el-input class="info-input" v-model="info.legalName" placeholder="法人身份姓名" ></el-input>
            </el-form-item>
            <el-form-item label="法人身份证号" prop="legalIdNumber">
               <el-input class="info-input" v-model="info.legalIdNumber" placeholder="法人身份证号" ></el-input>
            </el-form-item>
            <el-form-item label="法人身份证有效期" prop="legalExTimeStr">
               <el-date-picker 
                    class="info-select"
                    v-model="info.legalExTimeStr"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="法人身份证有效期截至时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结算账户开户名" prop="settleAccountName">
               <el-input class="info-input" v-model="info.settleAccountName" placeholder="结算账户开户名（同营业执照法人一致）" ></el-input>
            </el-form-item>
            <el-form-item label="结算账户开户号" prop="settleAccountNumber">
               <el-input class="info-input" v-model="info.settleAccountNumber" placeholder="对公账户号或者法人银行卡号"></el-input>
            </el-form-item>
            <el-form-item label="银行预留手机号" prop="bankPhone">
               <el-input class="info-input" v-model="info.bankPhone" placeholder="如不开通即时到账可不填写" ></el-input>
            </el-form-item>
            <el-form-item label="结算账户开户行" prop="settleBank">
               <el-select class="info-select" filterable 
                    :filter-method="fiflerBank" 
                    v-model="info.settleBank" 
                    @change="handleSettleBank"
                    placeholder="请选择">
                        <el-option
                        v-for="(item,index) in selectBankList"
                        :key="index"
                        :label="item"
                        :value="item">
                        </el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="结算户支行地址" prop="">
               <el-select class="info-select" @change="handleBankProv" v-model="bankProvince" placeholder="请选择">
                        <el-option
                        v-for="item in provinceList"
                        :key="item.provinceid"
                        :label="item.province"
                        :value="item.provinceid">
                        </el-option>
                  </el-select>
                  <el-select class="info-select" @change="handleBankCtiy" v-model="bankCity" placeholder="请选择">
                        <el-option
                        v-for="item in bankCityList"
                        :key="item.cityid"
                        :label="item.city"
                        :value="item.cityid">
                        </el-option>
                  </el-select>
            </el-form-item>
            <el-form-item label="结算户开户支行" prop="settleBranchBank">
               <el-select class="info-select" filterable 
               :filter-method="fiflerSettleBank"
                @click="handleSettleBranchBank" 
                v-model="info.settleBranchBank" placeholder="请选择">
                        <el-option
                        v-for="(item,index) in selectSettleBankList"
                        :key="index"
                        :label="item"
                        :value="item">
                        </el-option>
                  </el-select>
            </el-form-item>
            <div class="info-title">商户汇率信息</div>
            <el-form-item label="交易支付费率" >
               <el-input class="info-input" disabled v-model="rate" ></el-input>
            </el-form-item> 
            <el-form-item label="商户入网备注" prop="remark">
               <el-input class="info-input" placeholder="商户入网备注" v-model="info.remark" ></el-input>
            </el-form-item>
            <div class="info-title">资质证照信息</div>
            <div class="info-tips"> 注：请保证资质照片的匹配性，证照齐全且真实有效</div>
            <div class="info-tips-btn"><span @click="notice=true">注意事项</span><span @click="example=true">手持身份证示例</span></div>
             <div class="info-cell file-cell">
                <div style="border-top: 1px solid #eee;width:100%;min-width:900px">
                  <el-row>
                    <el-col :span="4">
                      <vueUploader label="门头照" name="merchantHeadPic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="收银台照" name="merchantChechPic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="经营场所照" name="otherPhotoThreePic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="法人身份证正面照" name="identityFacePic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="法人身份证反面照" name="identityBackPic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="开户许可证照" name="businessCardPic" @onChange="handleChange"/>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="4">
                      <vueUploader label="营业执照照" name="businessPic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="结算人身份证正面照" name="identityFaceCopyPic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="结算人身份证反面照" name="identityBackCpoyPic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="手持身份证照片" name="identityBodyPic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="非法人对私授权函" name="otherPhotoFourPic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="租房合同" name="otherPhotoTwoPic" @onChange="handleChange"/>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="4">
                      <vueUploader label="其他资料" name="otherPhotoPic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="内部前台照片" name="firstPhotoPic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="银行卡正面照片" name="bankFrontPhotoPic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="银行卡反面照片" name="bankReversePhotoPic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="商户场景照片" name="mchScenePhotoPic" @onChange="handleChange"/>
                    </el-col>
                    <el-col :span="4">
                      <vueUploader label="商户总分店关系证明" name="relationshipPhotoPic" @onChange="handleChange"/>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <vueUploader label="商户增值协议" name="merchantPhotoPic" @onChange="handleChange"/>
                    </el-col>
                  </el-row>
                </div>

            </div>  
         </el-form>
          
         <div class="submit-box">
             <el-button type="success" @click="submitShopInfo" size="medium" style="width:200px">提交</el-button>
            <el-button type="danger" @click="resetShopInfo" size="medium" style="width:200px;margin-left:30px">重置</el-button>
         </div>
     </div>

     <el-dialog
        title="注意事项"
        :visible.sync="notice"
        width="500">
        <ol>
            <li>请确保营业执照信息清晰可见</li>
            <li>请确保商户门店门口照片招牌清晰可见</li>
            <li>店内环境照片</li>
            <li>补充材料照片</li>
        </ol>
    </el-dialog>
    <el-dialog
        title="手持身份证示例"
        :visible.sync="example"
        width="500">
        <div class="example-box">
            <img src="./sfzsf.jpg" alt="加载失败！" width="100%">
        </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "@/utils/http.js";
import vueUploader from "@/components/common/temp/vueUploader.vue";

export default {
  name: "add-shop",
  data() {
    return {
      notice: false, // 提示显示
      example: false, // 照片示例显示
      uploading:false, // 是否正在上传
      percent:0, // 上传进度
      rate: "",
      info: {
        isJfPos: false, // 即富
        mobilePhone: "", // 商户注册手机号
        shopName: "", // 商户名称
        shopShortName: "", // 商户简称
        shopRegisterName: "", // 注册名称
        shopProvinces: "", // 省份
        shopCity: "", // 城市
        shopAreas:'', // 区
        shopAddress: "", // 商户地址
        shopUserName: "", // 商户联系人
        shopUserEmail: "", // 联系人邮箱
        shopUserPhone: "", //  联系人电话
        alipayAccount: "", // 商户支付宝账户
        shopCustomerPhone: "", // 客服电话
        industryCategory: [], // 行业类别
        shopType: 1, // 入网商户类别  1企业 2个体户 3小微商户
        shopIdNumber: "", // 执照证件号码
        shopStartTime:'', // 营业执照办理日期
        shopIdNumExTimeStr: "", // 证件到期时间
        settleAccountType: 1, // 结算账户类型 1 对公 2 对私
        idNumberType: 1, // 入网证件类型 1三合一 2营业执照
        legalName: "", // 法人代表姓名
        legalIdNumber: "", // 法人身份证号
        legalExTimeStr: '', // 法人身份证有效期
        settleAccountName: "", // 结算账户开户名
        settleAccountNumber: "", // 结算账户开户号
        bankPhone: "", // 银行预留手机号
        settleBank: "", // 结算账户开户行
        settleBankAddressId: "", // 开户行省份id
        settleBankCity: "", // 开户行城市
        settleBankAddress: "", // 结算户支行地址
        settleBranchBank: "", // 结算户开户支行
        remark: "", // 商户入网备注
        // businessPic: null, // 营业执照照片
        // legalIdPic: null, //  法人身份证正面
        // legalIdBackPic: null, // 法人身份证反面
        // bankFrontPic: null, // 银行卡正面
        // bankReversePic: null, // 银行卡反面
        // mchScenePic: null, // 场景照
        // shopHeadPic: null, // 商户门头照片
        // firstPic: null, // 内部前台照片
        // accountPic: null, // 开户许可证照片
        // relationshipPic: null, // 商户总分店关系证明
        // merchantPic: null // 商户增值协议
      },
      rules: {
        shopName: [
          { required: true, message: "请输入商户名称", trigger: "blur" }
        ],
        shopShortName: [
          { required: true, message: "商户简称不能为空", trigger: "blur" }
        ],
        shopRegisterName: [
          { required: true, message: "注册名称不能为空", trigger: "blur" }
        ],
        shopProvinces: [
          { required: true, message: "省份不能为空", trigger: "change" }
        ],
        shopCity: [
          { required: true, message: "城市不能为空", trigger: "change" }
        ],
        shopAreas: [
          { required: true, message: "所在区不能为空", trigger: "change" }
        ],
        shopAddress: [
          { required: true, message: "商户地址不能为空", trigger: "blur" }
        ],
        shopUserName: [
          { required: true, message: "商户联系人不能为空", trigger: "blur" }
        ],
        shopUserEmail: [
          { required: true, message: "联系人邮箱不能为空", trigger: "blur" }
        ],
        shopUserPhone: [
          { required: true, message: "联系人电话不能为空", trigger: "blur" }
        ],
        alipayAccount: [
          { required: true, message: "支付宝账户不能为空", trigger: "blur" }
        ],
        shopCustomerPhone: [
          { required: true, message: "客服电话不能为空", trigger: "blur" }
        ],
        industryCategory: [
          { required: true, message: "行业类别不能为空", trigger: "change" }
        ],
        shopIdNumber: [
          { required: true, message: "执照证件号码不能为空", trigger: "blur" }
        ],
        shopIdNumExTimeStr: [
          { required: true, message: "证件到期时间不能为空", trigger: "blur" }
        ],
        shopStartTime: [
          { required: true, message: "证件办理日期不能为空", trigger: "blur" }
        ],
        legalName: [
          { required: true, message: "法人代表名称不能为空", trigger: "blur" }
        ],
        legalIdNumber: [
          { required: true, message: "法人身份证不能为空", trigger: "blur" }
        ],
        legalExTimeStr: [
          {
            required: true,
            message: "法人身份证有效期不能为空",
            trigger: "blur"
          }
        ],
        settleAccountName: [
          { required: true, message: "结算账户开户名不能为空", trigger: "blur" }
        ],
        settleAccountNumber: [
          { required: true, message: "结算账户开户号不能为空", trigger: "blur" }
        ],
        bankPhone: [
          { required: true, message: "银行预留手机号不能为空", trigger: "blur" }
        ],
        settleBank: [
          {
            required: true,
            message: "结算账户开户行不能为空",
            trigger: "change"
          }
        ],
        settleBranchBank: [
          {
            required: true,
            message: "结算户开户支行不能为空",
            trigger: "change"
          }
        ]
      },
      provinceList: [],
      cityList: [],
      areasList: [],
      shopTypeList: [
        { value: 1, label: "企业" },
        { value: 2, label: "个体户" },
        { value: 3, label: "小微商户" }
      ],
      idNoTypeList: [
        { value: 1, label: "三证合一营业执照" },
        { value: 2, label: "营业执照" }
      ],
      AccountTypeList: [
        { value: 1, label: "对公结算" },
        { value: 2, label: "对私结算" }
      ],
      categoryList: [
        {
          dataValue: "默认",
          dataDTOList: [
            {
              dataValue: "默认"
            }
          ]
        }
      ],
      bankList: [],
      selectBankList: [],
      bankCityList: [],
      bankProvince: "",
      bankCity: "",
      settleBankList: [],
      selectSettleBankList: []
    };
  },
  components: { vueUploader },
  created() {
   this.resetForm = { ...this.info }; // 用来重置
    this.init();
    let info = localStorage.getItem("shop-register-info");
    if (info) {
        this.info = JSON.parse(info);
    }
  },
  
  mounted() {
    window.onbeforeunload = this.saveData;
  },
  methods: {
    init() {
      this.getBankList(); // 获取银行卡列表
      this.getProvinceList(); // 获取省份信息
      this.getCategoryList(); // 行业类别
    },
    saveData() {
      localStorage.setItem("shop-register-info", JSON.stringify(this.info));
    },
    handleChange({ name, file }) {
      this.$set(this.info, name, file);
    },
    resetShopInfo(){
    this.$confirm('您确认要清空已经填写的信息吗？','温馨提示',{
        confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(_=>{
        this.info = this.resetForm;
      })
  },
    getProvinceList() {
      let url = `user/app/province/queryall`;
      this.$Http
        .post(url, ``)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.provinceList = res.data.result;
          } else {
            this.$message(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message("获取省份信息失败！");
        });
    },
    getCategoryList() {
      let url = `user/data/findIndustryCategory`;
      this.$Http
        .get(url, "")
        .then(res => {
          if (res.data.resp_code === "000000") {
            res.data.result.length !== 0 &&
              (this.categoryList = res.data.result);
          } else {
            this.$mesasge(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message.error("获取行业类别列表失败！");
        });
    },
    getBankList() {
      let url = `user/app/bankbranch/query/all`;
      this.$Http
        .get(url, ``)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.bankList = res.data.result;
            this.selectBankList = this.bankList.map(item => item);
          }
        })
        .catch(err => {
          console.log("获取银行列表失败！");
        });
    },
    fiflerBank(query) {
      if (query !== "") {
        this.selectBankList = this.bankList.filter(item => {
          return item.indexOf(query) > -1;
        });
      } else {
        this.selectBankList = this.bankList.map(item => item);
      }
    },
    fiflerSettleBank(query) {
      if (query !== "") {
        this.selectSettleBankList = this.settleBankList
          .filter(item => {
            return item.indexOf(query) > -1;
          })
          .map(item => {
            return item;
          });
      } else {
        this.selectSettleBankList = this.settleBankList.map(item => {
          return item;
        });
      }
    },
    
    handleSettleBranchBank() {
      if (!this.bankProvince || !this.bankCity) {
        this.$message("请先选择地区！");
        return;
      }
    },
    handleSettleBank(value) {
      if (!this.bankProvince && !this.bankCity) {
        return;
      }
      this.handleBankCtiy(this.bankCity);
    },
    handleShopCity(cityid){
      this.info.shopAreas = '';
      let url = `user/app/queryAreaListByCityId?cityId=${cityid}`;
      this.$Http.get(url).then(res=>{
        if(res.data.resp_code === '000000'){
          this.areasList = res.data.result;
        }else{
          this.$message.warning(res.data.resp_message);
        }
      }).catch(err=>{
        this.$message.error("获取县区信息失败！");
      })
      
    },
    handleBankProv(value) {
      this.bankCity = "";
      this.info.settleBranchBank = "";
      let url = `user/app/city/queryall`;
      let params = `provinceid=${value}`;
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.bankCityList = res.data.result;
          } else {
            this.$message(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message("获取列表失败！");
        });
    },
    handleBankCtiy(value) {
      if (!this.bankProvince || !this.info.settleBank) {
        this.$message("请先选择银行和地址！");
        return;
      }
      let url = `user/app/findAllBackGround/query/topname`;
      let params = `province=${this.bankProvince}&city=${value}&topName=${
        this.info.settleBank
      }`;
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.settleBankList = res.data.result;
            this.selectSettleBankList = this.settleBankList.map(item => {
              return item;
            });
          } else {
            this.$message(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message("获取支行失败！");
        });
    },
    handleShopProv(value) {
      this.info.shopCity = "";
      this.info.shopAreas = "";
      // let target = this.provinceList.find(item => {
      //   return item.province == value;
      // });
      // let v = null;
      // target && (v = target.provinceid);
      let url = `user/app/city/queryall`;
      let params = `provinceid=${value}`;
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.cityList = res.data.result;
          } else {
            this.$message(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message("获取列表失败！");
        });
    },
    handleAvatarSuccess(type, res) {
      if (res.data.resp_code === "000000") {
        this.info[type] = res.data.result;
      } else {
        this.$notify({
          title: "提示",
          message: res.data.resp_message,
          type: "warning"
        });
      }
    },
    checkInfo() {
      let status = false;
      this.$refs.shopinfoForm.validate(valid => {
        status = valid;
        if (!valid) {
          this.$notify({
            title: "警告",
            message: "填写的信息有误！无法提交！请重新填写！",
            type: "warning"
          });
          return false;
        }
      });

      //   let pics = ['businessPic','legalIdPic','legalIdBackPic','shopHeadPic','firstPic','accountPic']
      //   for(let i=0;i<pics.length;i++){
      //       if(!this.info[pics[i]]){
      //           this.$notify({
      //             title: '警告',
      //             message: '请上传完整的图片材料！',
      //             type: 'warning'
      //           });
      //           status=false;
      //           return false;
      //       }
      //   }
      return status;
    },
    uploadProgress(evt) {
      const _this = this;
      if (evt.lengthComputable) {
        const percentComplete = Math.round((evt.loaded * 100) / evt.total);
        _this.percent = percentComplete / 100;
      } else {
        console.warn("upload progress unable to compute");
      }
    },
    handleShopInfoSubmit() {
      this.info.mobilePhone = this.info.shopUserPhone; // 默认就是商户注册手机号
      let submitinfo = { ...this.info };
      if (this.info.isJfPos) {submitinfo.isJfPos = 1} else {submitinfo.isJfPos = 2};
      submitinfo.settleBankAddress = this.bankProvince + this.bankCity;
      submitinfo.industryCategory = this.info.industryCategory.join("|");
      submitinfo.settleBankAddressId = this.bankProvince;
      submitinfo.settleBankCity = this.bankCity;

      let param = new FormData();
      for (let key in submitinfo) {
        if(submitinfo[key]!=='' && submitinfo[key]!==null && submitinfo[key]!==undefined){
          param.append(key, submitinfo[key]);
        }
      }
      const token = sessionStorage.getItem(1);
      let url = this.$Http.defaults.baseURL + `user/shopRegister/purchase/${token}`;
      this.uploading = true;
      try {
        const xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", this.uploadProgress, false);
        xhr.open("POST", url, true);
        xhr.send(param);
        xhr.onload = () => {
          this.uploading = false;
          if (xhr.status === 200 || xhr.status === 304) {
            const res = JSON.parse(xhr.responseText);
            if (res.resp_code === "000000") {
              this.$notify({title: "提示", message: res.resp_message,type: "success"});
              localStorage.clear(); // 清空localStorage
              this.$router.push({name: "shopInfo"});
            } else {
              this.$message.info(res.resp_message);
            }
          } else {
            this.$message.error("服务器繁忙！上传失败！");
          }
        };
      } catch(err) {
          this.uploading = false;
          console.error(err);
          this.$message.error("服务器繁忙！上传失败！");
      }
    },
    submitShopInfo() {
      if (!this.checkInfo()) {return;}
      this.$confirm(`你确定要注册商户：${this.info.shopName}  管理员手机为：${this.info.shopUserPhone} 吗？`,'温馨提示',{
          confirmButtonText: '确定提交',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(_=>{
          this.handleShopInfoSubmit();
      })

      // if (!this.checkInfo()) {
      //   return;
      // }
      // this.info.mobilePhone = this.info.shopUserPhone; // 默认就是商户注册手机号
      // let submitinfo = { ...this.info };
      // if (this.info.isJfPos) {
      //   submitinfo.isJfPos = 1;
      // } else {
      //   submitinfo.isJfPos = 2;
      // }
      // submitinfo.settleBankAddress = this.bankProvince + this.bankCity;
      // submitinfo.industryCategory = this.info.industryCategory.join("|");
      // submitinfo.settleBankAddressId = this.bankProvince;
      // submitinfo.settleBankCity = this.bankCity;
      // let token = sessionStorage.getItem(1);
      // let url = `user/shop/add/${token}`;
      // let params = ``;
      // for (let key in submitinfo) {
      //   if (submitinfo[key] !== "" && submitinfo[key] !== null && submitinfo[key] !== undefined) {
      //     if (params === "") {
      //       params = key + "=" + submitinfo[key];
      //     } else {
      //       params = params + "&" + key + "=" + submitinfo[key];
      //     }
      //   }
      // }
      // params = encodeURI(params);
      // this.$Http
      //   .post(url, params)
      //   .then(res => {
      //     if (res.data.resp_code === "000000") {
      //       // 添加成功
      //       this.$notify({
      //         title: "提示",
      //         message: "添加成功",
      //         type: "success"
      //       });
      //       this.$router.push({
      //         name: "shopInfo"
      //       });
      //     } else {
      //       this.$notify({
      //         title: "提示",
      //         message: res.data.resp_message
      //       });
      //     }
      //   })
      //   .catch(err => {
      //     this.$notify({
      //       title: "添加失败！",
      //       message: "添加失败！请重新尝试！",
      //       type: "error"
      //     });
      //   });
    }
  }
};
</script>
<style scoped>
.add-shop {
  box-sizing: border-box;
  padding: 20px;
}
.container {
  border: 1px solid #ededed;
}
.shop-title {
  height: 50px;
  line-height: 50px;
  font-size: 26px;
  color: #409eff;
  padding: 5px 20px;
  border-bottom: 1px solid #ededed;
}
.info-list {
  box-sizing: border-box;
  padding: 10px 12%;
}
.info-label {
  display: inline-block;
  min-width: 120px;
}
.info-input,
.info-select {
  flex-grow: 1;
  width: 100%;
}
.info-title {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px solid #dbdbdb;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.info-tips {
  color: red;
}
.info-cell {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 0 15px;
  border-bottom: 1px solid #dbdbdb;
}
.file-label {
  height: 30px;
}
.avatar {
  height: 100%;
  width: 100%;
  display: block;
}
.cell-file {
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.file-cell {
  flex-wrap: wrap;
}
.info-tips-btn {
  color: blue;
  padding: 5px 0 15px;
  border-bottom: 1px solid #dbdbdd;
}
.info-tips-btn > span {
  display: inline-block;
  padding: 4px 20px 0;
  cursor: pointer;
}
.submit-box {
  text-align: center;
  padding: 20px;
}
.example-box {
  box-sizing: border-box;
  padding: 20px;
}
.upload-file {
  width: 178px;
  height: 178px;
  box-sizing: border-box;
}
.file-label.is-required::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
</style>